<template>
	<view>
		<navigationbar :title="title"></navigationbar>
		<view class="container">
			<view class="content">
				<view class="userAvatar" @click="uploadAvatar">
					<view class="left">
						<text>头像</text>
					</view>
					<image :src="data.avatar" mode=""></image>
				</view>
				<view class="userName">
					<text>姓名</text>
					<input type="text" v-model="data.nickname" />
				</view>
				<view class="userGender" @click="genderChange">
					<text>性别</text>
					<text>{{data.gender}}</text>
				</view>
				<view class="userRole" @click="roleChange">
					<text>我的身份</text>
					<text>{{data.role}}</text>
				</view>
				<view class="userYears" @click="yearsChange">
					<text>毕业年份</text>
					<text>{{data.years}}</text>
				</view>
				<view class="userBirthday" @click="birthdayChange">
					<text>出生年月</text>
					<text>{{data.birthday}}</text>
				</view>
				<view class="userWX">
					<text>微信号</text>
					<input type="text" v-model="data.wx_number" />
				</view>
			</view>
			<view class="footer">
				<view class="btnContainer"><u-button class="btnUploadFile" size="normal" text="保存" :color="buttonBgColor" @click="saveInfo"></u-button></view>
			</view>
		</view>
		<!-- 选择器 -->
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
		<!-- 操作提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import navigationbar from '../../navigationBar.vue'
	export default {
		components:{
			navigationbar
		},
		onShow() {
			Object.assign(this.data, this.$store.state.userInfo)
		},
		data() {
			return {
				show: false,
				selkey: 'gender', //用于判断用户点击的行
				columns: [['男','女']],
				buttonBgColor: '#7aaffe',
				title: '个人信息',
				data: {
					avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1f24ae54-f413-4707-aa3f-f365584e95cd/bb4e95a7-3c2d-45e1-a6fb-f1341d2d05c0.jpg',
					nickname: '',
					gender: '',
					role: '',
					years: '',
					birthday: '',
					wx_number: ''
				}
			}
		},
		methods: {
			uploadAvatar() {
				let that = this
				uni.chooseImage({
					count: 1,
					async success (res) {
						let filePath = res.tempFilePaths[0]
						let cloudPath = 'a.jpg'
						let fileType = 'image'
						let result =await uniCloud.uploadFile({
							cloudPath,
							filePath,
							fileType
						})
						if(result.success){
							that.data.avatar = result.fileID
							that.$refs.uToast.show({
								message: '头像上传成功',
								icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
								type: 'success'
							});
						}else{
							that.$refs.uToast.show({
								message: '头像上传失败',
								icon: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
								type: 'error'
							});
						}
					}
				})
			},
			saveInfo() {
				let data = this.data
				data.id = this.$store.state.userID
				uniCloud.callFunction({
					name: 'setUserInfo',
					data,
					success:(res) => {
						this.$refs.uToast.show({
							message: '信息保存成功',
							icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
							type: 'success'
						});
						uniCloud.callFunction({
							name: 'getUserInfo',
							data: {
								id: this.$store.state.userID
							},
							success: (res) => {
								this.$store.commit('setUserInfo', res.result.data)
							}
						})
					}
				})
			},
			genderChange() {
				this.show = true
			},
			roleChange() {
				this.columns = [['学生','职场人']]
				this.selkey = 'role'
				this.show = true
			},
			yearsChange() {
				this.columns = [['2022年','2021年','2020年','2019年','2018年','2017年']]
				this.selkey = 'years'
				this.show = true
			},
			birthdayChange() {
				this.columns = [['2006年','2005年','2004年','2003年','2002年','2001年','2000年','1999年','1998年','1997年','1996年','1995年','1994年','1993年','1992年','1991年','1990年'],['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月']]
				this.selkey = 'birthday'
				this.show = true
			},
			confirm(data) {
				switch (this.selkey){
					case 'gender':
						this.data.gender = data.value[0]
						break;
					case 'role':
						this.data.role = data.value[0]
						break;
					case 'years':
						this.data.years = data.value[0]
						break;
					case 'birthday':
						this.data.birthday = `${data.value[0].replace('年','')}-${data.value[1].replace('月','')}`
						break;
				}
				this.show = false
			},
			cancel() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	$color: #dddddd;
	.container {
		width: 100%;
		.content {
			width: 90%;
			margin: 0 auto;
			.userAvatar {
				display: flex;
				flex-flow: row;
				padding: 20rpx 0;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid $color;
				.left {
					text {
						display: block;
					}
					& text:nth-of-type(1) {
						font-size: 35rpx;
					}
				}
				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 75rpx;
				}
			}
			.userName,.userWX {
				padding: 30rpx 0;
				border-bottom: 1rpx solid $color;
				font-size: 35rpx;
				input {
					margin-top: 20rpx;
				}
			}
			.userGender,.userRole,.userYears,.userBirthday {
				border-bottom: 1rpx solid $color;
				font-size: 35rpx;
				display: flex;
				flex-flow: row;
				padding: 50rpx 0;
				justify-content: space-between;
				align-items: center;
				& text:nth-of-type(1) {
					font-size: 35rpx;
				}
			}
		}
		.footer {
			width: 100%;
			margin: 0 auto;
			position: fixed;
			background-color: white;
			z-index: 9999;
			bottom: 0;
			.btnContainer {
				width: 90%;
				margin: 40rpx auto;
			}
		}
	}
</style>
